import {
    Space, Table, Row, Col, Select, Button, Form, DatePicker, Modal, Input,
    Radio, Checkbox,
    Upload,
} from 'antd';
import { useState } from 'react';
// import AddNotice from './addNotice'
import { PlusOutlined } from '@ant-design/icons';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
// 公告状态
const statusMap = {
    0: '未发送',
    1: '已发送',
    2: '发送失败',
}
// 公告列表配置
const columns = [
    {
        title: '系统',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>,
    },
    {
        title: '公告标题',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '图片',
        dataIndex: 'imgUrl',
        key: 'imgUrl',
    },
    {
        title: '跳转链接',
        key: 'url',
        dataIndex: 'url',
    },
    {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
    },
    {
        title: '定时发送时间',
        key: 'sendingTime',
        dataIndex: 'sendingTime',
    },
    {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        render: (_, record) => (
            <Space size="middle">
                <span>{statusMap[record.status]}</span>
            </Space>
        ),
    },
    {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <a>编辑</a>
                <a>撤销</a>
                <a>删除</a>
            </Space>
        ),
    },
];
// 公告数据
const data = [
    {
        key: '1688',
        name: '淘宝1688',
        title: '123',
        imgUrl: '',
        url: '',
        createTime: '2024-03-8 12:00:00',
        sendingTime: '2024-03-10 12:00:00',
        status: 0,
    },
    {
        key: '1689',
        name: '淘宝1688',
        title: '标题2',
        imgUrl: '',
        url: '',
        createTime: '2024-03-09 12:00:00',
        sendingTime: '2024-03-14 12:00:00',
        status: 1,
    },
];
const getData = () => {
    for (let index = 0; index < 50; index++) {
        data.push({
            key: (1689 + index),
            name: '淘宝1688-' + (index + 1),
            title: '标题-' + (index + 1),
            imgUrl: '',
            url: '',
            createTime: '2024-03-8 12:00:00',
            sendingTime: '2024-03-10 12:00:00',
            status: 0,
        })

    }
    // Api.getCatlist({}).then((res) => {
    //     console.log(res)
    // })
}
// 筛选状态下拉
const statusElements = () => {
    const elements = [];
    for (const key in statusMap) {
        if (Object.hasOwnProperty.call(statusMap, key)) {
            const element = statusMap[key];
            elements.push(<Option value={key}>{element}</Option>)
        }
    }
    return elements
}

const options = [
    {
        label: '环境1',
        value: '101',
    },
    {
        label: '环境2',
        value: 'Pear',
    },
    {
        label: '环境3',
        value: 'Orange',
    },
];
const platformOptions = [
    {
        label: '1688',
        value: '1688',
    },
    {
        label: '淘宝',
        value: 'tb',
    },
    {
        label: '拼多多',
        value: 'pdd',
    },
]
const onChange = (checkedValues) => {
    console.log('checked = ', checkedValues);
};
const onChangePlatform = (checkedValues) => {
    console.log('checked = ', checkedValues);
};
getData()
const Notice = () => {
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [componentDisabled, setComponentDisabled] = useState(false);
    const [formData] = Form.useForm();
    const onFormLayoutChange = (values) => {
        console.log('disabled', values);
        // setComponentDisabled(disabled);
    };
    const [form] = Form.useForm();
    // 新建公告
    const onAddNotice = () => {
        setOpen(true);
    }
    const handleOk = () => {
        // 表单校验
        form
            .validateFields()
            .then((values) => {
                console.log(values)
                // 校验成功
                //   const result = await createNodeAPI({...values, clusterId: getData.clusterId})
                //   if(result && result.success){
                //     message.success('新增成功');
                //     getNodeData({ clusterId: getData.clusterId });
                //     setIsModalOpen(false);
                //     form.resetFields()
                //   }
            })
            .catch((err) => {
                // 校验失败
                console.log('err: ', err);
            });
        // setConfirmLoading(true);
        // setTimeout(() => {
        //     setOpen(false);
        //     setConfirmLoading(false);
        // }, 2000);
    };
    const onReset = () => {
        formData.resetFields();
    };
    const onFinish = (values) => {
        console.log(values);
    };
    return (
        <div>
            <div style={{ marginBottom: 20 }}>
                <Button type="primary" onClick={onAddNotice}>新建公告</Button>
            </div>
            <Form
                form={formData}
                onFinish={onFinish}
            >
                <Row gutter={24}>
                    <Col sm={24} md={4} lg={4}>
                        <Form.Item
                            name="gender"
                            label="创建时间"
                        >
                            <DatePicker
                                format="YYYY-MM-DD"
                                placeholder=""
                            />
                        </Form.Item>

                    </Col>
                    <Col sm={24} md={4} lg={4}>
                        <Form.Item
                            name="gender1"
                            label="系统"
                        >
                            <Select placeholder="请选择系统">
                                <Option value="0">分单系统</Option>

                            </Select>
                        </Form.Item>
                    </Col>
                    <Col sm={24} md={4} lg={4}>
                        <Form.Item
                            name="status"
                            label="状态"
                        >
                            <Select placeholder="请选择状态">
                                {/* <Option value="0">分单系统</Option> */}
                                {statusElements()}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col sm={12} md={4} lg={4}>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button htmlType="button" onClick={onReset} style={{marginLeft:10}}>
                                重置
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>

            </Form>
            <Table bordered columns={columns} dataSource={data} pagination={{
                pageSize: 50,
            }} />
            {/* 新建公告弹窗 */}

            <Modal
                title="新建公告"
                width={800}
                open={open}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={() => { setOpen(false); }}
            >
                <div>
                    <Form
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 14,
                        }}
                        layout="horizontal"
                        form={form}
                    >
                        <Form.Item label="选择系统：" name="system">
                            <Select>
                                <Select.Option value="demo">分单系统</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="展示平台：" name="platform">
                            <Checkbox>全选</Checkbox>
                            <div>
                                <Checkbox.Group
                                    options={platformOptions}
                                    onChange={onChangePlatform}
                                />
                            </div>

                        </Form.Item>
                        <Form.Item label="公告标题：" name="title">
                            <Input
                                placeholder='只支持文本，字数限制再20字以内'
                                disabled={componentDisabled}
                                maxLength={20}
                            />
                        </Form.Item>
                        <Form.Item label="添加图片：" valuePropName="upload">
                            <Upload action="/upload.do" listType="picture-card">
                                <div>
                                    <PlusOutlined />
                                    <div
                                        style={{
                                            marginTop: 8,
                                        }}
                                    >
                                    </div>
                                </div>
                            </Upload>
                        </Form.Item>
                        <Form.Item label="公告详情" name="details">
                            <TextArea rows={4} placeholder="只支持文本，限制200个子节" maxLength={20} />
                        </Form.Item>

                        <Form.Item label="跳转链接" name="url">
                            <Input maxLength={100} placeholder='只可以添加一条' />
                        </Form.Item>
                        <Form.Item label="投放环境：" name="setting">
                            <Radio.Group>
                                <Radio value="0"> 全部环境投放 </Radio>
                                <Radio value="1"> 正式环境 </Radio>
                                <Radio value="2"> 灰度环境 </Radio>
                                <Radio value="3"> 测试环境 </Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="环境类型：" name="types" >
                            <Checkbox.Group
                                options={options}
                                onChange={onChange}
                            />
                        </Form.Item>


                        <Form.Item label="是否需要定时发送：" name="isTimed">
                            <Radio.Group>
                                <Radio value="0">是</Radio>
                                <Radio value="1">否</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="定时发送时间" name="timedTransmission">
                            <RangePicker />
                        </Form.Item>

                    </Form>
                </div>
            </Modal>
        </div>

    )
}

export default Notice;